<template>
  <div class="tpd_dialog">
    <el-dialog v-model="visible" width="40%" center>
      <template #header>
        <div class="dialog_header">从已授权的公众号选择</div>
      </template>
      <div class="content_header">
        <span class="title">公众号列表</span>
        <!-- <el-icon class="icon"><refresh /></el-icon> -->
        <!-- 更新于:{{ DFormat(new Date(), "yyyy-MM-dd hh:mm:ss") }} -->
      </div>
      <el-scrollbar height="450px" @click="onDelete">
        <el-space wrap size="small">
          <el-card v-for="item in list" :key="item.id" :id="item.id" :class="item.id == publicInfo.id ? 'active' : ' '" style="width: 300px" class="box-card" @click.stop="handleId(item.id)">
            <div class="bottom">
              <div class="left">
                <el-image style="width: 60px; height: 60px" :src="item.head_img" fit="cover">
                  <template #error>
                    <div>
                      <el-icon><icon-picture /></el-icon>
                    </div>
                  </template>
                </el-image>
              </div>
              <div class="right">
                <h3 class="right_h3">{{ item.nick_name }}</h3>
                <div class="right_btn">
                  <el-tag v-if="item.service_type_info == 0" type="danger" size="small">订阅号</el-tag>
                  <el-tag v-if="item.service_type_info == 2" size="small">服务号</el-tag>
                </div>
              </div>
            </div>
            <div class="footer">
              <span v-if="item.verify_type_info == -1" class="icon_warning"> <img style="width: 16px; margin-right: 6px" src="@/assets/smartMarketing/nocompleted_icon.png" alt="" />未认证</span>
              <span v-else class="icon_warning"> <img style="width: 16px; margin-right: 6px" src="@/assets/smartMarketing/completed_icon.png" alt="" /> 已认证</span>
              <span v-if="item.verify_type_info == 0" class="icon_monitor"> <img style="width: 16px; margin-right: 6px" src="@/assets/smartMarketing/platformoff_icon.png" alt="" />已绑定微信开放平台 </span>
              <span v-else class="icon_monitor"> <img style="width: 16px; margin-right: 6px" src="@/assets/smartMarketing/platformno_icon.png" alt="" /> 未绑定微信开放平台 </span>
            </div>
          </el-card>
        </el-space>
      </el-scrollbar>

      <div class="btn_box">
        <el-button type="text" @click="visible2 = true">添加授权公众号</el-button>
        <div>
          <el-button size="small" @click="visible = false">取消</el-button>
          <el-button size="small" type="primary" @click="onSubimt">确定</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog v-model="visible2" width="40%">
      <template #header>
        <div class="dialog_header">添加授权公众号</div>
      </template>
      <div class="empower">
        <div class="empower_image">
          <div class="empower_image_left">
            <img src="@/assets/smartMarketing/Shape.png" alt="" />
          </div>
          <div class="empower_image_center"></div>
          <div class="empower_image_right"></div>
        </div>
        <div class="empower_btn">
          <el-button size="small" type="primary">
            <el-link href="/channelconfig/officeAccount/oaManage" target="_blank" :underline="false">授权公众号</el-link>
          </el-button>
        </div>
        <div class="empower_text">需要公众号管理员 (即公众号注册者) 进行扫码上传哦~</div>
        <div class="empower_border"></div>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive } from 'vue'
  import router from '@/router'
  import { DFormat } from '@/utils/utils'
  import { Picture as IconPicture } from '@element-plus/icons-vue'

  import { getOfficeAccountList } from '@/api/channelconfig/officeAccount'
  const emit = defineEmits(['submit'])
  const list = ref([])
  const visible = ref(false)
  const visible2 = ref(false)
  const publicInfo = reactive({
    type: '',
    name: '',
    id: '',
    url: ''
  })
  const getList = async (id) => {
    publicInfo.id = id
    const params = {
      page: 1,
      page_size: 100
    }
    const res = await getOfficeAccountList(params)
    visible.value = true
    list.value = res.data
    if (res.data.length == 1) {
      publicInfo.id = res.data[0].id
      publicInfo.type = res.data[0].verify_type_info
      publicInfo.name = res.data[0].nick_name
      publicInfo.url = res.data[0].head_img
    }
  }
  const handleId = (id) => {
    if (publicInfo.id == id) {
      publicInfo.id = ''
    } else {
      let info = list.value?.find((item) => item.id == id)
      publicInfo.id = id
      publicInfo.type = info?.verify_type_info
      publicInfo.name = info?.nick_name
      publicInfo.url = info?.head_img
    }
  }
  const onDelete = () => {
    publicInfo.id = ''
  }
  const onSubimt = () => {
    visible.value = false
    emit('submit', publicInfo)
  }
  defineExpose({ getList })
</script>
<style lang="scss" scoped>
  :deep .active {
    border: 1px solid #ff6b00 !important;
  }
  .tpd_dialog {
    :deep .el-dialog__header {
      font-weight: 700;
    }
    .content_header {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      .title {
        // border-right: 1px solid #a9aaac;
        padding-right: 8px;
        margin-right: 6px;
        font-weight: 700;
      }
      .icon {
        margin-right: 10px;
      }
    }

    .bottom {
      display: flex;

      margin-bottom: 15px;
      .left {
        margin-right: 10px;
        .el-icon {
          font-size: 60px;
        }
      }
      .right {
        display: flex;
        align-items: center;
        flex-direction: column;
        text-align-last: left;
        .right_h3 {
          padding-bottom: 10px;
          font-weight: 700;
        }
        .right_btn {
          margin-left: -30px;
        }
      }
    }
    .footer {
      display: flex;
      align-items: center;
      width: 100%;
      padding-top: 15px;
      border-top: 1px solid #aaa3;

      .icon_warning {
        display: flex;
        align-items: center;
        width: 70px;
      }
      .icon_monitor {
        display: flex;
        align-items: center;
      }
    }
    .btn_box {
      display: flex;
      justify-content: space-between;
    }
    // 添加公众号授权弹窗
    .empower {
      display: flex;
      align-items: center;
      flex-direction: column;
      .empower_image {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 60%;
        padding: 30px 0 38px;
        margin-left: 90px;
        // background-color: green;
        .empower_image_left {
          width: 64px;
          height: 64px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .empower_image_center {
          width: 68px;
          height: 68px;
          background: url('@/assets/smartMarketing/bind.png') no-repeat;
        }
        .empower_image_right {
          width: 157px;
          height: 37px;
          background: url('@/assets/login/login_log.png') no-repeat;
          background-size: 80% 80%;
        }
      }
      .empower_btn {
        height: 80px;
      }
      .empower_text {
        height: 60px;
      }
      .empower_border {
        width: 80%;
        height: 1px;
        background-color: #a9aaac;
        margin-top: 10px;
      }
    }
    :deep .el-link--inner {
      color: #fff;
    }
  }
</style>
